import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'index.dart';
import '../../../common/utils/index.dart';

/// 登录页面视图（全新设计 - 验证码登录）
/// 
/// 对标Android原生"奇刷刷"登录页面
/// - 默认验证码登录方式
/// - 支持切换到密码登录
/// - 简洁的白色背景设计
class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  // 主视图构建方法（紧凑优化版）
  Widget _buildView() {
    return Container(
      color: const Color(0xFFF5E5E0), // 淡粉色背景
      child: SafeArea(
      child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(horizontal: 24.w), // 32→24 紧凑化
        child: Column(
          children: [
              SizedBox(height: 40.h), // 60→40 紧凑化
              // Logo和应用名
              _buildLogo(),
              SizedBox(height: 40.h), // 60→40 紧凑化
            // 登录表单
            _buildLoginForm(),
              SizedBox(height: 16.h), // 20→16 紧凑化
              // 登录按钮
              _buildLoginButton(),
              SizedBox(height: 12.h), // 16→12 紧凑化
              // 用户协议
              _buildAgreement(),
              SizedBox(height: 20.h), // 底部间距
          ],
          ),
        ),
      ),
    );
  }

  /// 构建Logo（紧凑优化版 - 使用Android原生图片）
  Widget _buildLogo() {
    return Column(
      children: [
        // Logo图标
        Container(
          width: 70.w, // 80→70 紧凑化
          height: 70.h,
      decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(14.r), // 16→14 紧凑化
        boxShadow: [
          BoxShadow(
                color: Colors.black.withOpacity(0.05),
                blurRadius: 8.r, // 10→8 紧凑化
                offset: Offset(0, 2.h),
          ),
        ],
      ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(14.r),
            child: Image.asset(
              'assets/icons/icon_login_logo.png',
              width: 70.w,
              height: 70.h,
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(height: 12.h), // 16→12 紧凑化
        // 应用名称
        Text(
          '奇刷刷',
          style: TextStyle(
            fontSize: 18.sp, // 20→18 紧凑化（一级标题标准）
            fontWeight: FontWeight.w500,
            color: const Color(0xFF333333),
            letterSpacing: 2,
          ),
        ),
        SizedBox(height: 2.h),
        Text(
          'QI SHUA SHUA',
      style: TextStyle(
            fontSize: 11.sp, // 12→11 紧凑化（辅助文本标准）
            color: const Color(0xFF999999),
            letterSpacing: 1,
          ),
      ),
      ],
    );
  }

  /// 构建登录表单（紧凑优化版）
  Widget _buildLoginForm() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
            children: [
        // 手机号输入框
        _buildPhoneInput(),
        SizedBox(height: 12.h), // 16→12 紧凑化
        // 验证码或密码输入框（根据登录方式）
        Obx(() => controller.isCodeLogin.value
            ? _buildSmsCodeInput()
            : _buildPasswordInput()),
        SizedBox(height: 10.h), // 12→10 紧凑化
        // 切换登录方式
        _buildSwitchLoginMode(),
      ],
    );
  }

  /// 构建手机号输入框（紧凑优化版）
  Widget _buildPhoneInput() {
    return Container(
      height: 46.h, // 50→46 紧凑化
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Row(
        children: [
          // 区号选择
          Container(
            padding: EdgeInsets.symmetric(horizontal: 12.w),
            child: Row(
              children: [
                Text(
                  '+86',
                  style: TextStyle(
                    fontSize: 14.sp, // 15→14 紧凑化
                    color: const Color(0xFF333333),
                  ),
                ),
                SizedBox(width: 4.w),
                Icon(
                  Icons.arrow_drop_down,
                  size: 18.r, // 20→18 紧凑化
                  color: Colors.grey[600],
                ),
              ],
            ),
          ),
          // 分隔线
          Container(
            width: 1,
            height: 24.h,
            color: const Color(0xFFE5E5E5),
      ),
          // 手机号输入
          Expanded(
      child: TextField(
              controller: controller.usernameController,
              focusNode: controller.usernameFocusNode,
              keyboardType: TextInputType.phone,
              style: TextStyle(
                fontSize: 14.sp, // 15→14 紧凑化
                color: const Color(0xFF333333),
        ),
        decoration: InputDecoration(
                hintText: '请输入手机号',
          hintStyle: TextStyle(
                  fontSize: 14.sp, // 15→14 紧凑化
                  color: const Color(0xFFBBBBBB),
                ),
                border: InputBorder.none,
                contentPadding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 13.h), // 紧凑化
              ),
            ),
          ),
          // 清除按钮
          Obx(() => controller.username.value.isNotEmpty
              ? IconButton(
                  icon: Icon(
                    Icons.cancel,
                    size: 20.r,
                    color: const Color(0xFFBBBBBB),
                  ),
                  onPressed: () {
                    controller.usernameController.clear();
                    controller.username.value = '';
                  },
                )
              : const SizedBox()),
        ],
      ),
    );
  }

  /// 构建验证码输入框（紧凑优化版）
  Widget _buildSmsCodeInput() {
    return Container(
      height: 46.h, // 50→46 紧凑化
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
          child: Row(
            children: [
          Expanded(
            child: TextField(
              controller: controller.smsCodeController,
              focusNode: controller.smsCodeFocusNode,
              keyboardType: TextInputType.number,
              maxLength: 6,
              style: TextStyle(
                fontSize: 14.sp, // 15→14 紧凑化
                color: const Color(0xFF333333),
              ),
              decoration: InputDecoration(
                hintText: '请输入验证码',
                hintStyle: TextStyle(
                  fontSize: 14.sp, // 15→14 紧凑化
                  color: const Color(0xFFBBBBBB),
                ),
                border: InputBorder.none,
                counterText: '',
                contentPadding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 13.h), // 紧凑化
              ),
          ),
        ),
          // 分隔线
          Container(
            width: 1,
            height: 24.h,
            color: const Color(0xFFE5E5E5),
          ),
          // 获取验证码按钮
          Obx(() => InkWell(
                onTap: controller.countdown.value == 0
                    ? controller.getSmsCode
                    : null,
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 12.w), // 16→12 紧凑化
                  height: 46.h, // 50→46 紧凑化
                  alignment: Alignment.center,
                  child: Text(
                    controller.countdown.value == 0
                        ? '获取验证码'
                        : '${controller.countdown.value}秒',
                    style: TextStyle(
                      fontSize: 12.sp, // 13→12 紧凑化
                      color: controller.countdown.value == 0
                          ? const Color(0xFFE94F4F)
                          : const Color(0xFFBBBBBB),
                  fontWeight: FontWeight.w500,
                    ),
                ),
              ),
              )),
        ],
      ),
    );
  }

  /// 构建密码输入框（紧凑优化版）
  Widget _buildPasswordInput() {
    return Container(
      height: 46.h, // 50→46 紧凑化
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8.r),
      ),
      child: Row(
        children: [
          Expanded(
            child: Obx(() => TextField(
                  controller: controller.passwordController,
                  focusNode: controller.passwordFocusNode,
                  obscureText: !controller.isPasswordVisible.value,
              style: TextStyle(
                    fontSize: 14.sp, // 15→14 紧凑化
                    color: const Color(0xFF333333),
                  ),
                  decoration: InputDecoration(
                    hintText: '请输入密码',
                    hintStyle: TextStyle(
                      fontSize: 14.sp, // 15→14 紧凑化
                      color: const Color(0xFFBBBBBB),
                    ),
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.symmetric(horizontal: 12.w, vertical: 13.h), // 紧凑化
                  ),
                )),
          ),
          // 显示/隐藏密码
          Obx(() => IconButton(
                icon: Icon(
                  controller.isPasswordVisible.value
                      ? Icons.visibility
                      : Icons.visibility_off,
                  size: 18.r, // 20→18 紧凑化
                  color: const Color(0xFFBBBBBB),
            ),
                onPressed: controller.togglePasswordVisibility,
                padding: EdgeInsets.all(8.w), // 减小padding
              )),
        ],
      ),
    );
  }

  /// 构建切换登录方式（紧凑优化版 - 无下划线）
  Widget _buildSwitchLoginMode() {
    return Obx(() => GestureDetector(
          onTap: controller.toggleLoginMode,
      child: Text(
            controller.isCodeLogin.value ? '密码登录' : '验证码登录',
        style: TextStyle(
              fontSize: 12.sp, // 13→12 更小，去掉下划线
              color: const Color(0xFF666666),
            ),
          ),
        ));
  }

  /// 构建登录按钮（紧凑优化版）
  Widget _buildLoginButton() {
    return Obx(() => SizedBox(
          width: double.infinity,
          height: 46.h, // 50→46 紧凑化
          child: ElevatedButton(
            onPressed: controller.isLoading.value ? null : controller.onLoginTap,
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFFE94F4F),
              foregroundColor: Colors.white,
              elevation: 0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(23.r), // 25→23 对应高度调整
              ),
            ),
            child: controller.isLoading.value
                ? SizedBox(
                    width: 18.w, // 20→18 紧凑化
                    height: 18.h,
                    child: const CircularProgressIndicator(
                      strokeWidth: 2,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                    ),
                  )
                : Text(
                    '验证并注册',
                    style: TextStyle(
                      fontSize: 15.sp, // 16→15 紧凑化
                      fontWeight: FontWeight.w500,
                    ),
        ),
      ),
        ));
  }

  /// 构建用户协议（紧凑优化版 - 使用Android原生图片）
  Widget _buildAgreement() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Obx(() => GestureDetector(
              onTap: controller.toggleRememberPassword,
              child: Image.asset(
                controller.isRememberPassword.value
                    ? 'assets/icons/icon_account_select.png'
                    : 'assets/icons/icon_account_unselect.png',
                width: 16.r, // 使用合适的尺寸
                height: 16.r,
                fit: BoxFit.contain,
              ),
            )),
        SizedBox(width: 6.w),
        // 使用 Expanded 包裹 RichText 防止溢出
        Expanded(
          child: GestureDetector(
            onTap: () {
              // 点击整个文本区域也会选中checkbox
              controller.toggleRememberPassword();
            },
            child: RichText(
              textAlign: TextAlign.left,
              text: TextSpan(
                style: TextStyle(
                  fontSize: 11.sp, // 12→11 紧凑化（辅助文本标准）
                  color: const Color(0xFF999999),
                ),
                children: [
                  const TextSpan(text: '未注册的手机号验证登录后将自动生成账号，且代表您已阅读并同意'),
                  WidgetSpan(
                    child: GestureDetector(
                      onTap: () => controller.onUserAgreementTap(),
                      child: Text(
                        '《用户协议》',
                        style: TextStyle(
                          fontSize: 11.sp,
                          color: const Color(0xFFE94F4F), // 使用红色
                          decoration: TextDecoration.none,
                        ),
                      ),
                    ),
                  ),
                  const TextSpan(text: '及'),
                  WidgetSpan(
                    child: GestureDetector(
                      onTap: () => controller.onPrivacyPolicyTap(),
                      child: Text(
                        '《隐私政策》',
                        style: TextStyle(
                          fontSize: 11.sp,
                          color: const Color(0xFFE94F4F), // 使用红色
                          decoration: TextDecoration.none,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }


  @override
  Widget build(BuildContext context) {
    // 设置状态栏样式
    SystemUIUtils.setTransparentStatusBarDark();
    
    return GetBuilder<LoginController>(
      // ❌ 不要在这里初始化Controller！
      // Controller应该由Binding统一管理，否则会导致重复初始化和请求重复发送
      // init: LoginController(),
      id: "login",
      builder: (_) {
        return Scaffold(
          backgroundColor: const Color(0xFFF5E5E0),
          body: _buildView(),
        );
      },
    );
  }
}
